<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>地址管理</p>
		</header>

		<!-- 地址列表部分 -->
		<ul v-for="(items,index) in addressArr" :key="index" class="addresslist">
			<li>
				<div @click="tobuy(index)" class="addresslist-left">
					<h3 v-show="items.contactSex == 1">{{items.contactName}} 先生 {{items.contactTel}}</h3>
					<h3 v-show="items.contactSex == 0">{{items.contactName}} 女士 {{items.contactTel}}</h3>
					<p>{{items.address}}</p>
				</div>
				<div class="addresslist-right">
					<i @click="toUpdate(index)" class="fa fa-edit"></i>
					<i @click="toDelete(index)" class="fa fa-remove"></i>
				</div>
			</li>
		</ul>

		<!-- 新增地址部分 -->
		<div class="addbtn">
			<i class="fa fa-plus-circle"></i>
			<p @click="toAdd()">新增收货地址</p>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	
	export default{
		name:'UserAddress',
		data(){
			return {
			businessId:this.$route.query.businessId,
			addressArr:[],
			orderArr:[],
			user:{}
			}
		},
		created() {
		 	this.user = this.$getSessionStorage('user');
			//  //拿到用户地址
			// this.addressArr = this.$getSessionStorage('addressArr');
			this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId',this.$qs.stringify({
            userId:this.user.userId
			})).then(response=>{
				// console.log(response.data);
				this.addressArr = response.data;
				this.$setSessionStorage('addressArr',this.addressArr)
			}).catch(error=>{
				console.log(error)
			})

		},
		components:{
			Footer
		},
		methods:{
			//修改地址,带参数
			toUpdate(index){
				this.$router.push({
					path:'/update',
					//更改用户地址,传一个索引值
					query:{
						nowdaId:index
					}
				})
			},
			
			//返回去支付页面
			tobuy(index){
				//将索引值上传,返回上一个页面
				//////////////////////////////////
				// this.$setSessionStorage('number',index),
				// this.$router.go(-1)
				///////////////////////////////////
				this.$router.push({
					path:'/order',
					//更改用户地址,传一个索引值
					query:{
						daId:this.addressArr[index].daId
					}
				})
			},
			//删除地址,带参数
			toDelete(index){
			this.$axios.post('DeliveryAddressController/removeDeliveryAddress',this.$qs.stringify({
			daId:this.addressArr[index].daId
			})).then(response=>{
			if(response.data>0){
				alert('删除成功')
			}else{
				alert('删除失败')
			}
			}).catch(error=>{
				console.log(error)
			})

			
			},
			//添加用户地址
			toAdd(){
				this.$router.push({
					path:'/add'
				})
			}
			
		}
	}
</script>

<style scoped>
	/*************** 总容器 ***************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	/*************** header ***************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		/*保证在最上层*/
		z-index: 1000;
	}

	/*************** addresslist ***************/
	.wrapper .addresslist {
		width: 100%;
		margin-top: 12vw;
		background-color: #fff;
	}

	.wrapper .addresslist li {
		width: 100%;
		box-sizing: border-box;
		border-bottom: solid 1px #DDD;
		padding: 3vw;

		display: flex;
	}

	.wrapper .addresslist li .addresslist-left {
		flex: 5;
		/*左边这块区域是可以点击的*/
		user-select: none;
		cursor: pointer;
	}

	.wrapper .addresslist li .addresslist-left h3 {
		font-size: 4.6vw;
		font-weight: 300;
		color: #666;
	}

	.wrapper .addresslist li .addresslist-left p {
		font-size: 4vw;
		color: #666;
	}

	.wrapper .addresslist li .addresslist-right {
		flex: 1;
		font-size: 5.6vw;
		color: #999;
		cursor: pointer;

		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	/*************** 新增地址部分 ***************/
	.wrapper .addbtn {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		border-bottom: solid 1px #DDD;
		background-color: #fff;
		margin-top: 4vw;

		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 4.5vw;
		color: #0097FF;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .addbtn p {
		margin-left: 2vw;
	}
</style>
